<template>
  <div class="head">
    <div class="head_center">
      <img
        class="head_center_svg"
        src="https://static2.cnodejs.org/public/images/cnodejs_light.svg"
        alt=""
      />
      <form class="head_form" action="">
        <label for="i"
          ><img
            class="head_form_img"
            src="https://static2.cnodejs.org/public/images/search.e53b380a.hashed.png"
            alt=""
        /></label>
        <input id="i" class="head_input" type="text" />
      </form>
      <ul class="head_ul">
        <li>
          <router-link to="/"><p>首页</p></router-link>
        </li>
        <li v-if="authorization">
          <router-link to="#"><p>未读信息</p></router-link>
        </li>
        <li>
          <router-link to="#"><p>新手入门</p></router-link>
        </li>
        <li>
          <router-link to="#"><p>API</p></router-link>
        </li>
        <li>
          <router-link to="#"><p>关于</p></router-link>
        </li>
        <li v-if="authorization">
          <router-link :to="'/user/' + user.username"
            ><p>设置</p></router-link
          >
        </li>
        <li v-if="authorization">
          <router-link to="/signin"
            ><p @click="cancellation">退出</p></router-link
          >
        </li>
        <li v-if="!authorization">
          <router-link to="/register"><p>注册</p></router-link>
        </li>
        <li v-if="!authorization">
          <router-link to="/signin"><p>登录</p></router-link>
        </li>
      </ul>
    </div>
    <div style="clear: both;"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
      authorization: localStorage.getItem("authorization"),
      user: {},
    };
  },
  methods: {
    headSub() {
      console.log(12121);
    },
    cancellation() {
      localStorage.setItem("authorization", "");
    },
    getUserToken() {
      if (this.authorization) {
        this.axios
          .get("/get/user/token")
          .then((res) => {
            this.user = res.data.results;
          })
          .catch((error) => {
            console.log(error);
            localStorage.setItem("authorization", "");
            this.$message.error("登录过期！");
            this.$router.push("/signin");
          });
      }
    },
  },
  mounted() {
    this.getUserToken();
  },
};
</script>
<style>
.head {
  /* height: 50px; */
  background: #444;
  
}
.head_center {
  width: 90%;
  /* height: 50px; */
  margin: auto;
}
.head_center_svg {
  width: 120px;
  float: left;
  height: auto;
  margin-top: 8px;
  margin-right: 20px;
}
.head_form {
  width: 233px;
  height: 26px;
  border-radius: 20px;
  margin-top: 12px;
  background: #888;
  float: left;
}
.head_form_img {
  color: #666;
  border: 0;
  margin-top: 3px;
  margin-left: 4px;
  float: left;
}
.head_input {
  float: left;
  height: 100%;
  width: 208px;
  border: 0;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  background: #888;
}
.head_input:focus {
  outline: none;
  border: 0;
}
.head_ul {
  float: right;
  list-style: none;
}
.head_ul li {
  float: left;
  line-height: 50px;
  padding: 0px 14px 0px 14px;
}
.head_ul p {
  font-size: 14px;
  color: #ccc;
}
.head_ul p:hover {
  color: #fff;
}
</style>